<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>我的收藏</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">


</head>
  
<body>
<div class="container-fluid p-t-15">
    <div id="app">
        <table border="1px" class="table table-striped   text-center">
            <tr id="lovegoodsul" style="font-size: 14px" class="table-primary" >
                <td class="jingpaili" style="width: 2%">序             号</td>
                <td class="jingpaili" style="width: 10%">商品名称</td>
                <td class="jingpaili" style="width: 40%">商品信息</td>
                <td class="jingpaili">商品价格</td>
                <td class="jingpaili">商品状态</td>
                <td class="jingpaili">收藏时间</td>
                <td class="jingpaili">收藏按钮</td>
            </tr>
            <tr v-for="(collect,key) in collectes" class="table-primary">
            	<td>{{key+1}}</td>
            	<td>{{collect.name}}</td>
            	<td>{{collect.details}}</td>
            	<td>{{collect.starting_price}}</td>
            	<td>{{collect.status}}</td>
            	<td>{{collect.time}}</td>
            	<td><button @click="lostover(collect)">取消收藏</button></td>
            
            
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript">
	new Vue ({
			el:"#app",
			data:{
				collectes:[],
			},
			
	
	
	mounted(){
		axios.get("lovegoods/lovegoodsInfo").then(res =>{
			this.collectes = res.data;
			console.info(res);
		})
	},
	methods:{
		lostover:function(collect){
			//先删数据库
			axios.get("lovegoods/dellovegoodsInfo").then(res =>{
			
		})
			//再删除页面上的数据
			for(var i=0;i<this.collectes.length;i++){
				var b = this.collectes[i];
				if(b.name==collect.name){
					this.collectes.splice(i,1);
					break;
				}
			}	
			 var bides  = this.collectes;
			 this.collectes = null;
			 this.collectes = bides;
		}
	}
	})



</script>




<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
</body>
</html>